<template>
  <div>react</div>
  <button @click="state.add">{{count}}</button>
  <p>{{double}}</p>
  <p @click="state.addNum">{{num}}</p>
</template>

<script>
import{reactive,computed,toRefs} from "vue"
export default {
    /* reactive函数可以设置复杂类型的数据 给页面使用 */
    setup(){
        const state = reactive({
            count:0,
            add(){
                state.count++
            },
            double:computed(()=>{
                return state.count*2
            }),
            num:2,
            addNum(){
                state.num++
            },
            donbleNum:computed(()=>{
                return state.num*2
            })
        })
        console.log(state);
        const refState = toRefs(state)
        console.log(refState);
        /* torefs可以将reactive函数创建的对象，转换为模板能够理解的普通对象 */
        return{
            ...refState
        }
    }
}
</script>

<style>

</style>